import logo from './logo.svg';
import './App.css';
// 引入子组件
import Count from './components/Count';
// import TodoList from './components/TodoList'





// 类的写法
import React from "react"
import TodoList from './components/TodoList';
import MarkdownEditor from './components/MarkdownEditor';


class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      seconds:0,
      info:"父组件的数据"
    }
  };
  // 生命周期钩子函数
  componentDidMount(){
    // console.log("00000")
    // const timer = setInterval(()=>{
    //   this.setState({
    //     seconds:this.state.seconds + 1
    //   })

    // },1000)
  }

  componentWillUnmount(){
    // clearInterval(this.timer)
  }
//  单页面应用 定时器一定要在卸载组件时，清除定时器

  // ...options
  render(){
    return (
      // 父组件的参数传给子组件
      <div>
        <MarkdownEditor/>
        <h1>{this.state.seconds}</h1>
        Hello react
        <Count title={this.state.info}></Count>
        <Count title={"second"}></Count>
        <Count title={"third"}></Count>

        <TodoList></TodoList>
      </div>
      // <div className="App">
      //   <header className="App-header">
      //     <img src={logo} className="App-logo" alt="logo" />
      //     <p>
      //       Edit <code>src/App.js</code> and save to reload.
      //     </p>
      //     <a
      //       className="App-link"
      //       href="https://reactjs.org"
      //       target="_blank"
      //       rel="noopener noreferrer"
      //     >
      //       Learn React
      //     </a>
      //   </header>
      // </div>
    );

  }
}


// function App() {
//   // jsx语法   html标签写在return里，注意只有一个根标签  
//   // 根标签也可以是<>   </>   相当于vue里的<template></template>
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

export default App;
